<template>
  <div class="home">
    <div class="head">
      <div class="left">
        <img src="../assets/14.png" alt="" />
      </div>
      <div class="middle">
        <div class="name">
          <span>爱吃锅巴的希芙</span>
          <img src="../assets/VIP.png" alt="" />
        </div>
        <div class="individuality">我是一个超级黄金小书虫</div>
      </div>
      <div class="right">
        <img src="../assets/qian2.png" alt="" />
      </div>
    </div>

    <div class="function">
      <van-grid>
        <van-grid-item icon="clock-o" text="浏览历史" />
        <van-grid-item icon="envelop-o" text="我的消息" />
        <van-grid-item icon="eye-o" text="我的关注" />
        <van-grid-item icon="like-o" text="阅读偏好" />
      </van-grid>
      <van-grid>
        <van-grid-item icon="manager-o" text="作家中心" />
        <van-grid-item icon="cluster-o" text="小游戏" />
        <van-grid-item icon="wap-home-o" text="小黑屋" />
        <van-grid-item icon="comment-o" text="反馈与帮助" />
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: "My",
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.head {
  margin: 4vw;
  display: flex;
  justify-content: space-around;
  .left {
    img {
      width: 10vw;
      height: 10vw;
    }
  }
  .middle {
    margin-left: -10vw;
    .name {
      span {
        font-size: 20px;
        font-weight: bold;
      }
      img {
        width: 4vw;
        height: 4vw;
      }
    }
    .individuality {
      font-size: 14px;
      color: #ccc;
    }
  }
  .right {
    display: flex;
    align-items: center;
    img {
      width: 8vw;
      height: 8vw;
    }
  }
}
.function {
  margin-top: 20vw;
}
</style>
